<template>
    <div class="video">
        <video class="vjs-small video-js vjs-layout-small" ref="vo">
        </video>
    </div>
</template>

<script setup lang="ts">
import { Socket } from 'socket.io-client';
import { DeviceServiceDetailResult, IwebrtcConfigs, IwebrtcConfigsurl } from '../interface';
import { ShallowRef, onDeactivated, onMounted, ref, shallowRef } from 'vue';
import type Player from 'video.js/dist/types/player'
const videojs = (window as any).videojs


const p = defineProps<{ device: DeviceServiceDetailResult, socket: Socket, source_id?: string }>()

interface Ocon { webrtcConfigs: { result: IwebrtcConfigs, config: IwebrtcConfigsurl } }
const dataurl = ref<string>()
const webrtcconf = ref<Ocon>()
const vo = ref<HTMLVideoElement>()
const player = shallowRef<Player>()
onMounted(() => {
    if (vo.value) {
        player.value = videojs(vo.value, {
            autoplay: true,
            controls: true,
            language: 'zh-cn',
            responsive: true,
            muted: true,
            width: 'auto',
            fluid: true
        }, () => {
        });

    }

    p.socket.on('actions.allocate', (e: any) => {
        dataurl.value = e.result.url
        console.log(dataurl.value)
        player.value?.src({ type: 'application/x-mpegURL', src: dataurl.value });
    })
    // p.socket.on('webrtc.webrtc', (e: Ocon) => {
    //     webrtcconf.value = e
    //     console.log(e)
    // })
    p.socket.emit('actions.allocate', {
        uid: p.source_id,
        device_id: p.device.id
    })
    // p.socket.emit('webrtc.webrtc', {
    //     uid: p.source_id,
    //     device_id: p.device.id
    // })
})

onDeactivated(() => {
    p.socket.removeListener('actions.allocate')
    // p.socket.removeListener('webrtc.webrtc')
    player.value?.dispose()
})




</script>

<style scoped>
.video {
    width: 350px;
    height: auto;
}
</style>